<template>
  <div class="head-bar" :class="{ 'cyber-theme': isCyberTheme }">
    <!-- 科技风格专用装饰，仅在科技风模式下显示 -->
    <template v-if="isCyberTheme">
      <div class="top-decoration"></div>
      <div class="scanner-line" :class="{ 'animate': scannerActive }"></div>
      <div class="corner-decoration top-right"></div>
      <div class="corner-decoration bottom-right"></div>
    </template>

    <div class="head-bar-inner">
      <!-- 左侧 Logo 和标题 -->
      <div class="head-bar-left" @click="backHome" :class="{ 'cyber-left': isCyberTheme }">
        <div class="logo-container" :class="{ 'cyber-logo': isCyberTheme }">
          <div class="logo-ring" v-if="isCyberTheme"></div>
          <img src="../../assets/yike.svg" class="logo" alt="Logo">
          <div class="logo-glow" v-if="isCyberTheme"></div>
          <div class="logo-pulse" v-if="isCyberTheme"></div>
        </div>

        <div class="title-container">
          <span class="title">涛的博客</span>
          <span class="subtitle" v-if="isCyberTheme">ADMIN CONSOLE</span>
        </div>
      </div>

      <!-- 右侧功能区 -->
      <div class="head-bar-right">
        <!-- 消息通知 -->
        <div class="nav-item notification-item" :class="{ 'cyber-notification': isCyberTheme }">
          <yk-badge is-dot :class="{ 'cyber-badge': isCyberTheme }" :hidden="isread">
            <div :class="{ 'cyber-icon-container': isCyberTheme }" class="icon-container" @click="changeActive(true)">
              <IconEmailFill class="cyber-icon" />
              <div class="icon-ping" v-if="isCyberTheme"></div>
            </div>
          </yk-badge>
        </div>

        <!-- 用户头像 -->
        <div class="nav-item avatar-item">
          <div class="avatar-container" :class="{ 'cyber-avatar-container': isCyberTheme }">
            <yk-avatar img-url="/src/assets/avatar.jpg" :class="{ 'cyber-avatar': isCyberTheme }"></yk-avatar>
            <div class="avatar-status" v-if="isCyberTheme"></div>
          </div>
        </div>

        <!-- 主题切换 -->
        <div class="nav-item theme-item">
          <yk-theme :class="{ 'cyber-theme-switch': isCyberTheme }" />
          <div class="theme-glow" v-if="isCyberTheme"></div>
        </div>

        <!-- 退出按钮 -->
        <div class="nav-item logout-item">
          <button :class="{ 'cyber-button': isCyberTheme, 'standard-button': !isCyberTheme }" @click="logout">
            <span class="btn-text">退出博客</span>
            <div class="btn-glow" v-if="isCyberTheme"></div>
            <div class="btn-border" v-if="isCyberTheme"></div>
          </button>
        </div>
      </div>
    </div>

    <!-- 信息视图 -->
    <InformationView :pageSize="4" :active="active" @close="changeActive(false)"></InformationView>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { InformationView } from '../reply';
import { useRouter, useRoute } from 'vue-router';
import { isRegisterAPI } from '@/api';
import { useCode } from '@/hooks/code';
import { useUserStore } from '@/stores/user';
import { noreadMessageAPI } from '@/api';

const userStore = useUserStore();
const { tackleCode } = useCode();
const router = useRouter();
const route = useRoute();
const active = ref<boolean>(false);
const isCyberTheme = ref<boolean>(false);
const scannerActive = ref<boolean>(false);
let scannerInterval: any = null;

// 根据路由判断是否使用科技风格
const checkRoutePath = () => {
  isCyberTheme.value = route.path === '/introduce';

  // 如果切换到非科技风格，清除扫描动画定时器
  if (!isCyberTheme.value && scannerInterval) {
    clearInterval(scannerInterval);
    scannerInterval = null;
  }

  // 如果切换到科技风格，启动扫描动画
  if (isCyberTheme.value && !scannerInterval) {
    animateScannerLine();
  }
};

// 监听路由变化
watch(
  () => route.path,
  () => checkRoutePath(),
  { immediate: true }
);

const backHome = () => {
  router.push({ path: '/' });
};

// 展开关闭私信
const changeActive = (e: boolean) => {
  active.value = e
};

// 检查是否注册了
const isRegister = async () => {
  const data = {};
  const res: any = await isRegisterAPI(data);

  if (tackleCode(res.code)) {
    // 已注册
    isLogin()
  }
};

// 检查是否登录
const isLogin = () => {
  const token = userStore.token

  if (!token && route.path !== '/login' && route.path !== '/register') {
    router.push({ path: '/login' });
  }
};

// 退出登录
const logout = () => {
  // 清除用户token
  userStore.$patch({
    id: -1,
    token: '',
    name: ''
  })
  router.push({ path: '/login' });
};

// 扫描线动画函数
const animateScannerLine = () => {
  scannerInterval = setInterval(() => {
    scannerActive.value = true;
    setTimeout(() => {
      scannerActive.value = false;
    }, 1500);
  }, 5000);
};

//获取私信未读数
const isread = ref(false)
const noreadMessage = async () => {
  const data = {
    token: userStore.token
  }
  const res: any = await noreadMessageAPI(data);
  if (tackleCode(res.code)) {
    if (res.data > 0) {
      isread.value = false;
    } else {
      isread.value = true;
    }

  }
}

onMounted(() => {
  isRegister();
  checkRoutePath();
  noreadMessage()
});
</script>

<style lang="less" scoped>
// 颜色变量
@primary-color: #00c8ff;
@secondary-color: #ff3860;
@bg-color: #0d1117;
@dark-bg: #0a0e17;
@light-line: rgba(0, 200, 255, 0.3);
@glow-effect: 0 0 10px rgba(0, 200, 255, 0.5), 0 0 20px rgba(0, 200, 255, 0.2);
@hover-bg: rgba(0, 200, 255, 0.1);
@standard-bg: #ffffff;
@standard-border: #e5e7eb;
@standard-text: #1f2937;

// 基础头部样式 (适用于普通主题)
.head-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background: @standard-bg;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid @standard-border;
  overflow: visible;
  transition: all 0.5s;

  // 内部容器
  .head-bar-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    z-index: 5;
  }

  // 科技主题
  &.cyber-theme {
    background: @dark-bg;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid @light-line;

    // 顶部装饰线
    .top-decoration {
      position: absolute;
      top: 0;
      left: 20%;
      right: 20%;
      height: 1px;
      background: @primary-color;
      box-shadow: @glow-effect;
      z-index: 1;
    }

    // 扫描线效果
    .scanner-line {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: linear-gradient(to right,
          rgba(0, 200, 255, 0),
          rgba(0, 200, 255, 0.7),
          rgba(0, 200, 255, 0));
      opacity: 0;
      transform: translateY(-100%);
      box-shadow: 0 0 10px rgba(0, 200, 255, 0.5);
      z-index: 2;
      pointer-events: none;

      &.animate {
        animation: scan-animation 1.5s ease-in-out;
      }
    }

    // 角落装饰
    .corner-decoration {
      position: absolute;
      width: 30px;
      height: 30px;
      pointer-events: none;
      z-index: 1;

      &.top-right {
        top: 0;
        right: 0;
        border-top: 2px solid @primary-color;
        border-right: 2px solid @primary-color;
        box-shadow: 5px -5px 10px -5px rgba(0, 200, 255, 0.3);
      }

      &.bottom-right {
        bottom: 0;
        right: 0;
        border-bottom: 2px solid @primary-color;
        border-right: 2px solid @primary-color;
        box-shadow: 5px 5px 10px -5px rgba(0, 200, 255, 0.3);
      }
    }
  }
}

// 左侧区域基础样式
.head-bar-left {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
  padding: 5px 10px;
  border-radius: 8px;

  .logo-container {
    width: 40px;
    height: 40px;
    margin-right: 14px;

    .logo {
      width: 100%;
      height: 100%;
    }
  }

  .title-container {
    display: flex;
    flex-direction: column;

    .title {
      font-size: 18px;
      font-weight: 600;
      color: @standard-text;
      transition: all 0.3s;
    }

    .subtitle {
      font-size: 10px;
      color: rgba(255, 255, 255, 0.5);
      letter-spacing: 1px;
      margin-top: 2px;
    }
  }

  // 科技风样式
  &.cyber-left {
    &:hover {
      background: @hover-bg;
      transform: translateY(-1px);

      .logo-ring {
        animation-duration: 5s;
      }

      .title {
        text-shadow: 0 0 8px @primary-color;
      }
    }

    .logo-container.cyber-logo {
      position: relative;

      .logo {
        position: relative;
        z-index: 3;
      }

      .logo-ring {
        position: absolute;
        top: -5px;
        left: -5px;
        width: calc(100% + 10px);
        height: calc(100% + 10px);
        border: 1px dashed @light-line;
        border-radius: 50%;
        animation: rotate 10s linear infinite;

        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: -3px;
          width: 6px;
          height: 6px;
          background: @primary-color;
          border-radius: 50%;
          transform: translateY(-50%);
          box-shadow: 0 0 8px @primary-color;
        }
      }

      .logo-glow {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: radial-gradient(circle at center,
            rgba(0, 200, 255, 0.2) 0%,
            rgba(0, 200, 255, 0) 70%);
        z-index: 1;
      }

      .logo-pulse {
        position: absolute;
        top: -8px;
        left: -8px;
        width: calc(100% + 16px);
        height: calc(100% + 16px);
        border-radius: 50%;
        border: 1px solid rgba(0, 200, 255, 0.3);
        animation: pulse 2s infinite;
        z-index: 0;
      }
    }

    .title-container .title {
      color: white;
    }
  }
}

// 右侧区域
.head-bar-right {
  display: flex;
  align-items: center;
  gap: 16px;

  .nav-item {
    position: relative;
  }

  // 通知图标 - 普通样式
  .notification-item {
    .icon-container {
      padding: 8px;
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.3s;
      display: flex;

      .cyber-icon {
        font-size: 20px;
        color: @standard-text;
        transition: all 0.3s;
      }

      &:hover {
        background-color: rgba(0, 0, 0, 0.05);
      }
    }

    // 科技风样式
    &.cyber-notification {
      .cyber-badge {
        :deep(.arco-badge-dot) {
          background-color: @secondary-color;
          box-shadow: 0 0 5px @secondary-color;
          width: 8px;
          height: 8px;
          top: 2px;
          right: 2px;
          border: none;
        }
      }

      .cyber-icon-container {
        background: @dark-bg;
        border: 1px solid transparent;

        .cyber-icon {
          color: rgba(255, 255, 255, 0.8);
        }

        &:hover {
          background: @hover-bg;
          border-color: @light-line;

          .cyber-icon {
            color: white;
            transform: scale(1.05);
          }

          .icon-ping {
            animation: ping 1.5s infinite;
          }
        }

        .icon-ping {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          border: 1px solid @primary-color;
          opacity: 0;
          transform: scale(0.5);
          pointer-events: none;
        }
      }
    }
  }

  // 头像 - 普通样式
  .avatar-item .avatar-container {
    cursor: pointer;

    // 科技风样式
    &.cyber-avatar-container {
      position: relative;

      :deep(.cyber-avatar) {
        border: 1px solid @light-line;
        transition: all 0.3s;
        background-color: @dark-bg;

        &:hover {
          border-color: @primary-color;
          box-shadow: 0 0 10px rgba(0, 200, 255, 0.3);
        }
      }

      .avatar-status {
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #10b981;
        border: 1px solid @dark-bg;
        bottom: 0;
        right: 0;
        box-shadow: 0 0 5px rgba(16, 185, 129, 0.5);
      }
    }
  }

  // 主题控制
  .theme-item {
    position: relative;

    // 科技风样式
    :deep(.cyber-theme-switch) {
      background-color: transparent;

      .arco-switch {
        background-color: rgba(0, 200, 255, 0.2);

        &:hover {
          background-color: rgba(0, 200, 255, 0.4);
        }
      }
    }

    .theme-glow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: radial-gradient(circle,
          rgba(0, 200, 255, 0.1) 0%,
          rgba(0, 200, 255, 0) 70%);
      z-index: -1;
      pointer-events: none;
    }
  }

  // 退出按钮 - 普通样式
  .logout-item {
    .standard-button {
      background: #f3f4f6;
      color: @standard-text;
      border: 1px solid #d1d5db;
      border-radius: 4px;
      padding: 0 16px;
      height: 34px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background: #e5e7eb;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      &:active {
        background: #d1d5db;
      }
    }

    // 科技风样式
    .cyber-button {
      position: relative;
      background: linear-gradient(to right, rgba(13, 17, 23, 0.8), rgba(19, 26, 35, 0.8));
      border: none;
      color: white;
      font-weight: 500;
      padding: 0 16px;
      height: 34px;
      border-radius: 4px;
      cursor: pointer;
      font-family: inherit;
      overflow: hidden;
      transition: all 0.3s;

      .btn-text {
        position: relative;
        z-index: 2;
      }

      .btn-glow {
        position: absolute;
        top: -100%;
        left: -100%;
        width: 300%;
        height: 300%;
        background: linear-gradient(to right,
            rgba(0, 200, 255, 0),
            rgba(0, 200, 255, 0.1),
            rgba(0, 200, 255, 0));
        transform: rotate(45deg);
        z-index: 1;
      }

      .btn-border {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 1px solid @light-line;
        border-radius: 4px;
        transition: all 0.3s;
      }

      &:hover {
        background: linear-gradient(to right, rgba(19, 26, 35, 0.8), rgba(26, 36, 48, 0.8));
        transform: translateY(-2px);

        .btn-border {
          border-color: @primary-color;
          box-shadow: 0 0 8px rgba(0, 200, 255, 0.3);
        }

        .btn-glow {
          animation: btn-shine 1.5s infinite;
        }
      }

      &:active {
        transform: translateY(1px);
      }
    }
  }
}

// 动画关键帧
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    opacity: 0.7;
  }

  50% {
    transform: scale(1.05);
    opacity: 0.3;
  }

  100% {
    transform: scale(0.95);
    opacity: 0.7;
  }
}

@keyframes ping {
  0% {
    opacity: 1;
    transform: scale(0.8);
  }

  80% {
    opacity: 0.2;
    transform: scale(1.6);
  }

  100% {
    opacity: 0;
    transform: scale(2);
  }
}

@keyframes scan-animation {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }

  10% {
    opacity: 1;
    transform: translateY(0);
  }

  90% {
    opacity: 1;
    transform: translateY(64px);
  }

  100% {
    opacity: 0;
    transform: translateY(64px);
  }
}

@keyframes btn-shine {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}
</style>